<template>
  <div class="order-item" @click="toDetail(item.id)">
    <div class="goods-img" v-if="!isGw">
      <img class="img" :src="ossDomain + item.coverImg" mode="aspectFill" alt="" />
    </div>
    <div class="text-info">
      <div class="title">
        {{ item.name }} <br />
        {{ item.enName }}
      </div>
      <div class="info">
        <div class="te">{{ item.skuName }} {{ item.skuEnName }}</div>
        <div class="te">x{{ item.quantity }}</div>
        <div class="te">¥ {{ item.payPrice }}</div>
        <div class="te">{{ statusCn(item.status) }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, computed, defineProps } from 'vue'
import { ossDomain } from '@/utils/oss'
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  isGw: {
    type: Boolean,
    default: false
  }
})

// 订单状态 1.待付款 2.待发货 3.待收货 4.已退款 5.已完成
const statusCn = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '未支付  Unpaid',
    2: '已支付  Paid',
    3: '待收货  Delivered',
    4: '已退款  Refunded',
    5: '已完成  Completed',
    6: '退款异常  RefundException',
    7: '已取消  Cancelled'
  }
  return statusMap[status] || '未知状态'
}

const toDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/orderInfo/orderInfo?id=${id}`
  })
}
</script>
<style lang="scss">
@import './order-item.scss';
</style>
